<template>
	<view class="zuiwai">
		
	<view>
		<div class="div-A">日期</div>
		<div class="div-B" >月支出</div>
		<div class="div-C">月收入</div>
		
		<picker mode="date" @change="bindDateChange">
		<div class="div-a" :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div>
		</picker>
		
		<div class="div-b">{{pay}}</div>
		<div class="div-c">{{get}}</div>
	</view>
	
	
	<!-- 搜索框 -->
	<view class="search-content">
	    
	</view>
	<!-- 账单列表 -->
	<view class="zlist-content" >
		<!-- <scroll-view scroll-y class="zlist-scroll1"> -->
		<scroll-view  scroll-y class="zlist-scroll" >
			   <view class="zlist-row" v-for="(item) in zList" @click="openzhangById(item.id)" >
					<image class="zlist-imames" :src="getimages(item.images)" />
					<view class="zlist" v-if="item.massge!=null ">{{item.massge}}</view>
					<view v-else class="zlist">{{item.accountType}} </view>
					
					<view class="zprice"  v-if="item.getorpay==1">{{item.price}} </view>
					<view class="z2price"  v-else>{{item.price}} </view>
			   </view>
		<!-- </scroll-view> -->
		</scroll-view>
	</view>
	
	
	<!-- 账单详细弹出 -->
	<u-popup v-model="addDialogShow" mode="bottom" :show="addDialogShow" @close="closeadd"
		:closeOnClickOverlay="true" :round="10">
		<view class="dialogCart">
			<view class="divCartTitle">
				<view class="title">账单详细</view>
			</view>
			<scroll-view scroll-y="true" :style="{ height: wh + 'rpx' }">
				<view class="divCartContent">
					
					<view class="Time">
					  <view class="Time1">时间：</view>
					  <view class="Timename1">{{zhangbyid.createTime}}</view>
					</view>
					
					<view class="getorpay">
					  <view class="getorpay1">类型：</view>
				     <view class="getorpayname1"  v-if="getorpay==1">支出</view>
					  <view class="getorpayname1"  v-else>收入</view>
					</view>
	           <view class="jizhangleixing">
					  <view class="jizhangleixing1">记账类型：</view>
					  <view class="typename1">{{zhangbyid.accountType}}</view>
					</view>
					
				   <view class="shurujinger">
					  <view class="shurujinger1">金额：</view>
					  <input class="price1" type="text" placeholder="金额"  v-model="zhangbyid.price"/>
					</view>
					
					
				  <view class="beizhu">
					  <view class="shurubeizhu1">备注：</view>
				     <input class="beizhu1" type="text" placeholder="备注"  v-model="zhangbyid.massge">
				  </view>
				  <view class="baocun">
					  <button class="button1" @click="savechange()">保存修改</button>
					  <button @click="closeadd">关闭</button>
					   <button  @click='showdeletezhang()'>删除</button>
						
				  </view>
			   </view>
			</scroll-view>
		</view>
	</u-popup>
	
	
	<!-- 刪除弹出 -->
	<u-popup v-model="deleteDialogShow" mode="bottom" :show="deleteDialogShow" @close="closedelete"
		:closeOnClickOverlay="true" :round="10">
		<view class="dialogCartdelete">
			<view class="divCartTitle">
				<view class="title">确认删除吗？</view>
			</view>
			<scroll-view scroll-y="true" :style="{ height: wh + 'rpx' }">
				<view class="divCartContent">
				  <view class="baocun">
					  <button @click="closedelete">关闭</button>
					  <button  @click='deletezhang()'>确认</button>
				  </view>
			   </view>
			</scroll-view>
		</view>
	</u-popup>
	
	
	</view>
</template>

<script>

	import {
	zListApi,
	zhangByIdApi,
	updateAccountApi,
	accountPayApi,
	accountGetApi,
	deleteAccountByidApi,
	} from '../../api/zlist'
	
	export default {
		data() {
			return {
				timeIndex:0,
				anyDate:'最近',
				pay:null,
				get:null,
				QiNiuYunUrl: "",
				seracher:null,
				addDialogShow:false,
				deleteDialogShow:false,
				getorpay:null,
				zhangyUseId:null,
				zhangbyid:{
					"images":"../../static/images/orderList.png",
					"massge":"早饭早饭早饭早饭早饭早饭早饭早饭早饭早饭",
					"accountType": "主食",
					"price":"50.0",
				},
				zList: [ {
				"images":"../../static/images/orderList.png",
				"massge":"早饭早饭早饭早饭早饭早饭早饭早饭早饭早饭",
            "accountType": "主食",
				"price":"50.0",
        },
        {
			  "images":"../../static/images/index.png",
            "accountType": "饮品",
				"price":"50.0",
        },
		  {
			  "images":"../../static/images/my.png",
		      "accountType": "衣物",
				"price":"50.0",
		  }, 
		  ],
				}
		},
		onShow() {
				this.initData()
				
		},
		created() {
		
			},
		mounted() {
			
		},
		methods: {
			initData(){
				this.zlist()
				this.allpay()
				this.allget()
				this.anyDate="最近"
				// this.dateTimeStr('y-m-d')
			},
			//获取当月的总支出
			async allpay(){
				const res = await accountPayApi()
				if (res.code === 1) {
					console.log(res.msg)
				         this.pay=res.data
				} else {
					return uni.$showMsg("获取总支出失败")
				       }
			} ,
			//获取当月的总收入
			async allget(){
				const res = await accountGetApi()
				if (res.code === 1) {
					console.log(res.msg)
				         this.get=res.data
				} else {
					return uni.$showMsg("获取总收入失败")
				       }
			} ,
			
			

			nowTime(){
				this.anyDate=Date.parse(new Date())
			},
			dateTimeStr(str){
				var date = new Date(),
				year = date.getFullYear(), //年
				month = date.getMonth() + 1, //月
				day = date.getDate(), //日
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), //分
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				hour >= 0 && hour <= 9 ? (hour = "0" + hour) : "";
				minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
				second >= 0 && second <= 9 ? (second = "0" + second) : "";
				if(str.indexOf('y') != -1){
					str = str.replace('y', year)
				}
				if(str.indexOf('m') != -1){
					str = str.replace('m', month)
				}
				if(str.indexOf('d') != -1){
					str = str.replace('d', day)
				}
				if(str.indexOf('h') != -1){
					str = str.replace('h', hour)
				}
				if(str.indexOf('i') != -1){
					str = str.replace('i', minute)
				}
				if(str.indexOf('s') != -1){
					str = str.replace('s', second)
				}
				this.anyDate=str
			},

			//网络图片路径转换
			getimages(path) {
				return this.QiNiuYunUrl+path
			},
			//查找该用户的记账列表
			async zlist(serchname,sercheDate){
				const params = {	
					massge:serchname,
					date:sercheDate
				}
				const res = await zListApi(params)
				if (res.code === 1) {
				         this.zList=res.data
				} else {
					return uni.$showMsg(res.msg)
			          }
		      } ,
			
			bindDateChange (e) {
					console.log("调用根据日期筛选方法")
					this.anyDate = e.detail.value
					console.log("当前选择日期"+this.anyDate)
					this.timeIndex = 4 
					this.zlist(null,this.anyDate) 
				},
			changeTime(index) {
					this.timeIndex = index
					this.anyDate = '自定义日期'
				},
				//根据账单id查找账单详细
			async openzhangById(id){
					this.addDialogShow = true
					this.zhangyUseId=id
				const res = await zhangByIdApi(id)
				if (res.code === 1) {
				        this.zhangbyid=res.data
						  this.getorpay=this.zhangbyid.getorpay
				} else {
					return uni.$showMsg(res.msg)
				       }
				}, 
			async	savechange(){
				let res = {}
				res = await updateAccountApi(this.zhangbyid)
				if (res.code === 1) {
					this.addDialogShow = false;
					this.initData()
					wx.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000//持续的时间
						})
					} else {
						return uni.$showMsg(res.msg)
				}
				
			},
			  //关闭弹出框
			  closeadd() {
					this.addDialogShow = false;
				},
				//弹出删除窗口
				showdeletezhang() {
					this.deleteDialogShow = true;
				},
		      //关闭刪除弹出框
		     closedelete() {
			     this.deleteDialogShow = false;
		      },
				//删除该条记账数据
		     async deletezhang(){
				   console.log(this.zhangyUseId)
					const res = await deleteAccountByidApi(this.zhangyUseId)
					if (res.code === 1) {
						this.addDialogShow = false;
						this.deleteDialogShow = false;
						this.initData()
						wx.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000//持续的时间
						})
					} else {
						return uni.$showMsg(res.msg)
					       }
		       }
		 
		 }
		}
</script>
<style>
	@import url(./zlist.css);
</style>

